<template>
  <div class="user-info">
    <el-form
      ref="userForm"
      label-width="220px"
      :rules="rules"
      :model="userInfo"
    >
      <!--手机 -->

      <el-form-item label="手机" prop="mobile">
        <el-input v-model="userInfo.mobile" style="width:220px" />
      </el-form-item>

      <!-- 工号 入职时间 -->

      <el-form-item label="入职时间" prop="timeOfEntry">
        <el-date-picker
          v-model="userInfo.timeOfEntry"
          type="date"
          class="inputW"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>

      <!-- 员工照片 -->

      <el-form-item label="员工头像" prop="staffPhoto">
        <!-- 放置上传图片 -->
        <!-- v-model定义在自己定义的组件
        实现的效果是：
        1.如果userInfo.staffPhoto有值,就显示图示
        2.用户上传了新的图片之后,把新的地址保存userInfo.staffPhoto -->
        <UploadImg v-model="userInfo.staffPhoto" />
      </el-form-item>

      <!-- 保存个人信息 -->
      <el-form-item>
        <el-button type="primary" @click="hSubmit">保存更新</el-button>
        <el-button @click="$router.push('/employees')">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getUserDetailById, updataEmployees } from '@/api/employee'
export default {
  data() {
    return {
      userInfo: {
        mobile: '',
        timeOfEntry: '',
        staffPhoto: ''
      },
      rules: {
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ],
        timeOfEntry: [{ required: true, message: '日期不能为空', trigger: 'blur' }],
        staffPhoto: [{ required: true, message: '照片不能为空', trigger: 'blur' }]

      }
    }
  },
  created() {
    this.loadUserDetailById()
  },
  methods: {
    // 获取到对应员工的id
    async loadUserDetailById() {
      const id = this.$route.query.id
      // 做一个判断，如果有id，就根据对应的id信息获取到员工对应的手机号码、入职时间以及个人工作照
      if (id) {
        // 发送请求，请求对应的数据
        const res = await getUserDetailById(this.$route.query.id)
        console.log('loadUserDetailById......', res)
        // 数据回填
        this.userInfo = res.data
      } else {
        // 没有找到对应的id，就返回员工列表页
        this.$message.info('没有id')
        return this.$router.push('/employees')
      }
    },
    // 点击保存更新按钮，进行如下操作
    hSubmit() {
      // 获取到组件实例的同时，在其内部进行校验
      this.$refs.userForm.validate(async valid => {
        console.log('***', valid)
        // 如果存在valid，则调用添加的请求
        if (valid) {
          // 校验通过，调用添加请求
          this.addSave()
        }
      })
    },
    // 如果员工的userInfo信息确认无误,就调用请求添加的接口,完成对应的逻辑操作
    async addSave() {
      // 使用try -- catch来捕获对应的错误信息
      try {
        // 调用更新员工信息的接口,完成信息的及时更新
        const res = await updataEmployees(this.userInfo)
        console.log('---', res)
        this.$message.success('更新成功')
      } catch (err) {
        // 捕获对应的错误信息
        this.$message.error(err.message)
      }
    }
  }

}
</script>
